<template>
  <div class="solution-container">
    <!-- 头部标题区域 -->
    <div class="header">
      <h1 class="title">解决方案</h1>
      <p class="subtitle">深耕行业 助力融合发展</p>
    </div>

    <!-- 导航菜单 -->
    <div class="nav-menu">
    <div 
      v-for="item in menuItems" 
      :key="item"
      class="nav-item"
      :class="{ active: currentTab === item }"
      @click="handleTabClick(item)"
    >
      {{ item }}
    </div>
  </div>

  <!-- 内容区域 -->
  <div class="content">
    <!-- 轮播图区域 -->
    <div class="banner">
      <img 
        :src="currentIndustry.bannerImage" 
        :alt="currentIndustry.title"
        class="banner-image"
      >
    </div>

    <div class="industry-info">
      <h2>{{ currentIndustry.title }}</h2>
      <p class="description">{{ currentIndustry.description }}</p>
    </div>

    <!-- 固定的合作伙伴logo区域 -->
    <div class="partner-logos">
      <div class="logo-item" title="中国南方电网"></div>
      <div class="logo-item" title="国家管网"></div>
      <div class="logo-item" title="中国能建"></div>
      <div class="logo-item" title="榆能集团"></div>
    </div>
  </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const menuItems = ['能源', '交通', '金融', '政务', '制造']
const currentTab = ref('能源')

// 模拟的行业数据
const industriesData = {
  '能源': {
    title: '能源行业',
    description: '任云科技联合合作伙伴，为电力公司提供一站式数据中心基础设施方案...',
    bannerImage: '/images/energy-banner.jpg' // 这里替换为实际图片路径
  },
  '交通': {
    title: '交通行业',
    description: '为交通运输企业提供智能化解决方案...',
    bannerImage: '/images/transport-banner.jpg'
  },
  '金融': {
    title: '金融行业',
    description: '为金融机构提供安全可靠的IT基础设施...',
    bannerImage: '/images/finance-banner.jpg'
  },
  '政务': {
    title: '政务行业',
    description: '助力政府部门打造智慧政务平台...',
    bannerImage: '/images/government-banner.jpg'
  },
  '制造': {
    title: '制造行业',
    description: '为制造企业提供工业互联网解决方案...',
    bannerImage: '/images/manufacturing-banner.jpg'
  }
}


// 计算当前显示的行业信息
const currentIndustry = computed(() => {
  return industriesData[currentTab.value]
})

const handleTabClick = (tab) => {
  currentTab.value = tab
}
</script>

<style lang="scss" scoped>
.solution-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.header {
  text-align: center;
  margin-bottom: 40px;

  .title {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .subtitle {
    font-size: 18px;
    color: #666;
  }
}

.nav-menu {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 40px;

  .nav-item {
    cursor: pointer;
    padding: 8px 16px;
    font-size: 16px;
    color: #333;
    transition: all 0.3s ease;

    &.active {
      color: #0066ff;
      border-bottom: 2px solid #0066ff;
    }

    &:hover {
      color: #0066ff;
    }
  }
}

.content {
  display: flex;
  flex-direction: column;
  gap: 40px;

  .banner {
    width: 90%;
    height: 300px;
    background-color: #f0f0f0; // 临时背景色
    overflow: hidden;
    border-radius: 8px;
    margin: 0 auto;
    max-width: 1000px;

    .banner-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: all 0.3s ease;
    }
  }

  .industry-info {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;

    h2 {
      font-size: 28px;
      margin-bottom: 20px;
    }

    .description {
      line-height: 1.6;
      color: #444;
    }
  }

  .partner-logos {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    margin-top: 20px;

    .logo-item {
      width: 200px;
      height: 60px;
      background-color: #f5f5f5;
      border-radius: 4px;
      transition: all 0.3s ease;

      &:hover {
        background-color: #e8e8e8;
        transform: translateY(-2px);
      }
    }
  }
}
</style>